<template>
  <div id="app">
    <keep-alive :include="include" :max="10">
      <router-view class="router" ref="router"/>
    </keep-alive>
    <Navigation v-if="navigation"/>
  </div>
</template>
<script>
import {mapGetters} from "vuex";
import Navigation from "@components/Navigation.vue";

function isKeepAlive($route) {
  return $route.meta.keepAlive === undefined || $route.meta.keepAlive;
}

export default {
  components: {Navigation},
  data() {
    return {
      needToken: false,
      include: isKeepAlive(this.$route) ? [this.$route.name] : [],
      history: []
    };
  },
  computed: mapGetters([
    "navigation",
    "footer",
    "header",
    "title",
    "isLogin",
    "userInfo",
    "rn",
    "token"
  ]),
  provide() {
    return {
      app: this
    };
  },
  watch: {
    $route(to, from) {
      if(typeof this.$refs.router.onShowInPage === 'function'){
        this.$refs.router.onShowInPage();
      }
      const lastPath = this.history[this.history.length - 1] || {},
          {isReplace, isBack} = this.$router;
      if (lastPath.path === to.path) {
        this.history.pop();
      } else {
        if (!isReplace) this.history.push({path: from.path, name: from.name});
      }
      if (isKeepAlive(to) && to.name !== "Login") {
        !this.include.includes(to.name) && this.include.push(to.name);
      }
      if (isKeepAlive(from) && isBack) {
        let index = this.include.indexOf(from.name);
        index !== -1 && this.include.splice(index, 1);
      }
      this.$router.isBack = false;
      this.$router.isReplace = false;
      this.processMessage(this.$route.params);
    }
  },
  created() {
  },
  mounted: function () {
    this.needToken = this.$route.meta.needToken;
  },
  methods: {}
};
</script>
